<template>
  <el-main>
    <el-card style="padding:0;position: relative;">
      <div slot="header" class="clearfix" style="font-weight:600;">
        <el-row style="text-align: right;">
          <el-col :span="12" style="text-align: left;">
            <span>{{typeList[eType].label}}情况</span>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-date-picker
              v-model="equipmentDate"
              type="date"
              size="mini"
              style="width: 140px;margin-right:10px;"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
              @change="choiceDate"
            >
            </el-date-picker>
            <el-select
              v-if="hasPerm('equipment:equipmentrent:list')&&hasPerm('equipment:equipmentbuy:list')"
              @change="choiceType"
              style="width: 130px;"
              v-model="eType"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in typeList"
                :key="item.type"
                :label="item.label"
                :value="item.type">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-empty v-if="chartData.length<=0" class="nodata" description="暂无数据" :image-size="230" :image="notFoundEquipmentPic"></el-empty>
      <div ref="chatRef" :class="className" :style="{height:height,width:width}" />
    </el-card>
  </el-main>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { getRentDataChartApi,getBuyDataChartApi } from "@/api/chart-data";
import notFoundEquipmentPic from "@/assets/other_images/NotFoundEquipment.png";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    }
  },
  data() {
    return {
      notFoundEquipmentPic,
      chart: null,
      eType:undefined,
      equipmentDate:'',
      typeList:[{type:0,label:'器材租借'},{type:1,label:'器材出售'}],
      chartData:[],
      nameList:[],
    }
  },
  created(){
    this.equipmentDate = new Date();
    if(this.hasPerm('equipment:equipmentrent:list')){
      this.eType = 0;
      this.getRentDataChart();
    }else if(this.hasPerm('equipment:equipmentbuy:list')){
      this.eType = 1;
      this.getBuyDataChart();
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    //选择日期
    choiceDate(){
      this.getRentDataChart();
    },
    choiceType(){
      if(this.eType==0){
        this.getRentDataChart();
      }else if(this.eType==1){
        this.getBuyDataChart();
      }
    },
    async getRentDataChart(){
      let res = await getRentDataChartApi({date:this.equipmentDate})
      if(res&&res.code==200){
        if(res.data!=null){
          this.chartData = res.data;
          this.nameList = [];
          this.chartData.forEach(item=>{
            this.nameList.push(item.name)
          })
          this.initChart()
        }
      }
    },
    async getBuyDataChart(){
      let res = await getBuyDataChartApi({date:this.equipmentDate})
      if(res&&res.code==200){
        if(res.data!=null){
          this.chartData = res.data;
          this.nameList = [];
          this.chartData.forEach(item=>{
            this.nameList.push(item.name)
          })
          this.initChart()
        }
      }
    },

    initChart() {
      this.chart = echarts.init(this.$refs.chatRef, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: this.nameList
        },
        series: [
          {
            name: this.eType==0? '租借数量':'出售数量',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            data: this.chartData,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .nodata{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
</style>
